<template>
  <view class="container user">
    <view class="info dark-mode">
      <h1 class="info_title">
        <image class="info_title_logo" src="/static/02.jpg" />
        <text class="info_title_name">贾静雯</text>
      </h1>
      <view class="info_list">
        <view class="info_item">
          <navigator class="item_a info-link" url="/pages/order/list/index">
            <uni-icons type="shop-filled" size="24" color="#333"></uni-icons>
            <text class="item_dsc">我的订单</text>
          </navigator>
        </view>
        <view class="info_item">
          <navigator class="item_a info-link" url="/pages/course/collect/index">
            <uni-icons type="vip-filled" size="24" color="#333"></uni-icons>
            <text class="item_dsc">我的收藏</text>
          </navigator>
        </view>
      </view>
    </view>
    <view class="list"></view>
    <view class="logout dark-mode info-link" @click="userStore.logout">
      退出登陆
    </view>
  </view>
</template>

<script lang="ts" setup>
import { onShow } from "@dcloudio/uni-app";
import { useUserStore } from "../../store/modules/user";

const userStore = useUserStore();

onShow(() => {
  if (!userStore.token) {
    uni.navigateTo({
      url: "/pages/login/index",
    });
    return;
  }
});
</script>

<style lang="scss" scoped>
.user {
  height: 100vh;
  background: #eee;
  overflow: hidden;
}
.info {
  background: #00cc99;
  &_title {
    height: 97px;
    padding: 0 24px;
    display: flex;
    align-items: center;
    border-bottom: 1rpx solid #eee;
    border-top: 1rpx solid #eee;
    &_logo {
      height: 60px;
      width: 60px;
      border-radius: 50%;
      background: #fff;
    }
    &_name {
      margin-left: 10px;
      color: #333;
      font-size: 20px;
      flex: 1;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      word-wrap: normal;
    }
  }
  &_list {
    display: flex;
    .info_item {
      width: 50%;
      text-align: center;
      .item_a {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 24px 0;
      }
      .item_dsc {
        font-size: 14px;
        margin-top: 8px;
      }
    }
  }
}

.logout {
  height: 52px;
  line-height: 52px;
  text-align: center;
  margin-top: 10px;
  background: #00cc99;
}

.popup_height {
  height: 100px;
  width: 100%;
  background: #fff;
}
</style>
